import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
import http from '@/utils/http';
import './index.scss';
import { set as setGlobalData } from '@/global'

const app = Taro.getApp();
class Login extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            loginid: '',
            password: '',
            openId: '',
            isBlur:''
        }
    }
    componentWillMount() {
        this.setState({
            openId: app.getValueSync('openId')
        })
    }
    config = {
        navigationBarTitleText: '登录'
    }
    
    handleChange(e) {
        this.setState({
            [e.target.dataset.name]: e.detail.value.replace(/[\u4e00-\u9fa5]/ig, '').replace(/\s+/g, '')
        })
    }
    login() {
        let { loginid, password, openId } = this.state
        // 测试不掉接口跳转首页
        let userInfo = {
            openid:openId,
            loginid,
            password,
            ward: 'test'
        }
        setGlobalData('userInfo', userInfo);
        app.saveSync('userInfo', JSON.stringify(userInfo))
        if (Taro.getCurrentPages().length === 1) {
            Taro.reLaunch({
                url: '/pages/index/index' 
            })
        }else {
            Taro.navigateBack();
        }

        return
        http.get('Login',{
            openid:openId,
            loginid,
            password
        }).then((d)=>{
            setGlobalData('userInfo', d.datas);
            app.saveSync('userInfo', JSON.stringify(d.datas));
            if (Taro.getCurrentPages().length === 1) {
                Taro.reLaunch({
                    url: '/pages/index/index' 
                })
            }else {
                Taro.navigateBack();
            }
        }).catch((e)=>{
            console.log(e);
        })
    }
    render () {
        let { isBlur, loginid, password} = this.state;
        return (
            <View className='login-box'>
                <View className='login-center bdr_10'>
                   <View className='topImg'>
                      <Image className='image' src={require('../../assets/imgs/login.jpeg')}></Image>
                    </View>

                    <View className='flex flex-r flex-item-center from-item mt-6-5'>
                        <Input type='number' value={loginid} maxLength='8' data-name='loginid' onInput={(event) => this.handleChange(event)} onFocus={() => { this.setState({ isBlur: 'loginid' }) }} placeholderClass={isBlur === 'loginid' ? 'placeholder_active' :''} className={`from-item-input flex-1 pl-4 ft26 bdr_10 ${isBlur === 'loginid' ? 'active':''}`} placeholder='请输入账号' />
                    </View>
                    <View className='flex flex-r flex-item-center from-item mt-6-5'>
                        <Input maxLength='16' value={password} data-name='password' onInput={(event) => this.handleChange(event)} password onFocus={() => { this.setState({ isBlur: 'password' }) }} placeholderClass={isBlur === 'password' ? 'placeholder_active' : ''} className={`from-item-input flex-1 pl-4 ft26 bdr_10 ${isBlur === 'password' ? 'active' : ''}`} placeholder='请输入密码' />
                    </View>
                    <View Style="padding:60rpx; font-size:24rpx; color:#777; line-height:40rpx;">
                    温馨提示：本系统用于自测练习，用户账号密码不限，请自行输入，如有疑问请联系开发人员
                    </View>

                    <View onClick={() => { loginid && password ? this.login() : '' }} className={`default-btn login-btn ft28  ${loginid && password ? '':'off'}`}>账号登录</View>
                </View>
            </View>
        )
    }
}
export default Login